<template>
	<view class="position-fixed-cover bg-000 player" :style="{'visibility': visible ? 'visible' : 'hidden'}">
		<web-view v-if="poster" class="position-absolute-cover opac-45" :src="'/hybrid/html/background_blur.html?image=' + encodeURIComponent(poster) + '&blur=20'"></web-view>
		<view class="position-absolute-cover">
			<com-status-bar></com-status-bar>
			<view class="top y-flex y-row y-align-center page-padding-gap" ref="top">
				<view class="back" @tap="hide">
					<com-icon name="unfold" size="50" color="rgba(255,255,255,.6)"></com-icon>
				</view>
				<view class="tabs y-flex y-flex-1 y-row y-justify-center y-align-center">
					<text class="fs-26 fw-bold" :style="{color: skinColor.color_white}">音频播放</text>
				</view>
				<view class="back">
				</view>
			</view>
			<view class="y-flex y-flex-1 page-padding-gap">
				<view style="max-height: 620rpx;" class="mt-20 mb-40 y-flex y-flex-1" ref="cd" v-if="poster">
					<find-image class="y-flex-1" borderRadius="20" :src="poster" mode="aspectFill"></find-image>
				</view>
				<view class="song-info mt-50 y-flex y-flex-1 opac-0" ref="info">
					<view class="y-flex y-row y-justify-start y-align-center">
						<view class="y-flex y-flex-1">
							<text class="lines-1 fs-50 fw-bold" style="color: rgba(255,255,255,.7)">{{title}}</text>
							<view class="y-flex y-row y-align-center mt-30">
								<text class="lines-1 fs-30 y-flex-1" style="color: rgba(255,255,255,.7)">{{creator || '未知歌唱家'}}</text>
								<view class="y-flex y-row y-align-center ml-30">
									<com-icon @click="handleShowVolume" name="notification" size="35" :color="skinColor.color_white"></com-icon>
									<com-icon class="ml-30" @click="switchLyricShow" :name="lyricShow ? 'subtitle_unblock_light' : 'subtitle_block_light'" size="35" :color="skinColor.color_white"></com-icon>
									<com-icon class="ml-30" @click="handleDownload" name="down_light" size="35" :color="skinColor.color_white"></com-icon>
								</view>
							</view>
						</view>
					</view>
					<picker-view class="y-flex-1 mt-20"
					v-if="visible"
					:value="[lyricNowIndex]"
					mask-top-style="background-image:rgba(0,0,0,0)"
					mask-bottom-style="background-image:rgba(0,0,0,0)"
					indicator-style="background-color:rgba(0,0,0,0.2);border: none;height:40px;">
					    <picker-view-column>
					        <view class="y-flex y-justify-center" style="height: 40px;" v-for="(item, index) in lyrics" :key="index">
								<text class="text-align-center fr-ddd" :style="{'font-size': lyricNowIndex == index ? '40rpx' : '30rpx'}">{{item.title}}</text>
							</view>
					    </picker-view-column>
					</picker-view>
				</view>
			</view>
			<view class="control" ref="control">
				<view class="pb-20">
					<slider :disabled="duration == 0" block-size="12" :value="progress" @change="handleSliderChange" @changing="handleSliderChanging" min="0" max="100" :block-color="skinColor.color_white" :activeColor="skinColor.color_white" :backgroundColor="skinColor.color_3" />
					<view class="y-flex y-row y-align-center y-justify-between mt-20">
						<text class="fs-26 mr-20 fr-fff">{{timeFormat(currentTime, currentTime < 3600 ? 'mm:ss' : 'HH:mm:ss')}}</text>
						<text class="fs-26 ml-30 fr-fff">{{timeFormat(duration, duration < 3600 ? 'mm:ss' : 'HH:mm:ss')}}</text>
					</view>
				</view>
				<view class="y-flex y-row y-align-center y-justify-between">
					<view class="control-box" @tap="changeMode">
						<com-icon name="loop_one_light" size="50" :color="skinColor.color_white" v-if="playMode == 'loop'"></com-icon>
						<com-icon name="loop_light" size="50" :color="skinColor.color_white" v-if="playMode == 'round'"></com-icon>
						<com-icon name="random_light" size="50" :color="skinColor.color_white" v-if="playMode == 'random'"></com-icon>
					</view>
					<view class="control-box" @tap="prev">
						<com-icon name="backward_fill" size="55" :color="skinColor.color_white"></com-icon>
					</view>
					<view class="control-box" @tap="toggle">
						<com-icon name="play_fill" size="80" :color="skinColor.color_white" v-if="paused"></com-icon>
						<com-icon name="stop" size="80" :color="skinColor.color_white" v-else></com-icon>
					</view>
					<view class="control-box" @tap="next">
						<com-icon name="play_forward_fill" size="55" :color="skinColor.color_white"></com-icon>
					</view>
					<view class="control-box" @tap="showPlaylist">
						<com-icon name="play_list" size="50" color="rgba(255,255,255,.6)"></com-icon>
					</view>
				</view>
			</view>
		</view>
		<com-safe-bottom />
	</view>
</template>

<script>
	import SkinColor from '@/assets/skin/index.js'
	import FindImage from './Image.vue'
	import { timeFormat } from '@/assets/js/util.js'
	const animation = weex.requireModule('animation');
	export default {
		inject: ['showVolume', 'download'],
		components: {FindImage},
		computed: {
			skinMode () {
				return this.$store.getters['setting/GET_SKIN_MODE']
			},
			skinColor () {
				return SkinColor[this.skinMode]
			},
			paused () {
				return this.$store.getters['audio/GET_PAUSED']
			},
			currentIndex () {
				return this.$store.getters['audio/GET_CURRENT_INDEX']
			},
			currentAudio () {
				const list = this.$store.getters['audio/GET_PLAY_LIST']
				return list[this.currentIndex]
			},
			src () {
				return this.$store.getters['audio/GET_CURRENT_SRC']
			},
			creator () {
				return this.$store.getters['audio/GET_CURRENT_CREATOR']
			},
			title () {
				return this.$store.getters['audio/GET_CURRENT_TITLE']
			},
			poster () {
				return this.$store.getters['audio/GET_CURRENT_POSTER']
			},
			lyrics () {
				const list = this.$store.getters['audio/GET_LYRIC_LIST']
				return list && list.length ? list : [{title: '暂无歌词'}]
			},
			lyricShow () {
				return this.$store.getters['audio/GET_LYRIC_SHOW']
			},
			playMode () {
				return this.$store.getters['audio/GET_PLAY_MODE']
			},
			lyricNowTitle () {
				return this.$store.getters['audio/GET_LYRIC_TITLE']
			},
			lyricNowIndex () {
				return this.$store.getters['audio/GET_LYRIC_INDEX'] || 0
			},
			currentTime () {
				return this.isSliderChanging ? this.currentTiming : this.$store.getters['audio/GET_CURRENT_TIME']
			},
			duration () {
				return this.$store.getters['audio/GET_DURATION']
			},
			progress () {
				return (this.currentTime / this.duration) * 100
			},
			timeFormat () {
				return timeFormat
			}
		},
		data () {
			return {
				visible: false,
				animaDuration: 400,
				delay: 200,
				isSliderChanging: false,
				currentTiming: 0
			}
		},
		methods: {
			//播放和暂停
			toggle (e) {
				e.stopPropagation && e.stopPropagation()
				if ( this.paused ) {
					uni.$emit('play')
				} else {
					uni.$emit('pause')
				}
			},
			showPlaylist (e) {
				e.stopPropagation && e.stopPropagation()
				uni.navigateTo({
					url: '/pages/find/audio/playlist',
					animationType: 'fade-in'
				})
			},
			handleShowVolume (e) {
				e.stopPropagation && e.stopPropagation()
				this.showVolume()
			},
			//更新时间
			handleUpdateTime (percent) {
				uni.$emit('seekSong', Math.ceil(((percent / 100) * this.duration)))
			},
			//改变播放模式
			changeMode () {
				this.$store.dispatch('audio/switchPlayMode')
			},
			// 下一曲
			next () {
				this.$store.dispatch('audio/next')
			},
			// 上一曲
			prev () {
				this.$store.dispatch('audio/prev')
			},
			//切换歌词显示
			switchLyricShow () {
				this.$store.dispatch('audio/switchLyricShow')
			},
			show () {
				this.visible = true
				this.$nextTick(() => {
					animation.transition(this.$refs.top, {
					    styles: {
							transform: 'translateY(0)',
							opacity: 1
					    },
					    duration: this.animaDuration, //ms
					    timingFunction: 'ease',
					    needLayout:false,
					    delay: this.delay //ms
					})
					animation.transition(this.$refs.info, {
					    styles: {
							opacity: 1
					    },
					    duration: this.animaDuration, //ms
					    timingFunction: 'ease',
					    needLayout:false,
					    delay: 0 //ms
					})
					animation.transition(this.$refs.control, {
					    styles: {
							transform: 'translateY(0)',
							opacity: 1
					    },
					    duration: this.animaDuration, //ms
					    timingFunction: 'ease',
					    needLayout:false,
					    delay: this.delay //ms
					})
					animation.transition(this.$refs.desc, {
					    styles: {
							opacity: 1
					    },
					    duration: this.animaDuration, //ms
					    timingFunction: 'ease',
					    needLayout:false,
					    delay: this.delay //ms
					})
					animation.transition(this.$refs.cd, {
					    styles: {
							transform: 'scale(1.1)',
							opacity: 1
					    },
					    duration: this.animaDuration, //ms
					    timingFunction: 'ease',
					    needLayout:false,
					    delay: 0 //ms
					}, () => {
						animation.transition(this.$refs.cd, {
						    styles: {
								transform: 'scale(1)'
						    },
						    duration: this.animaDuration / 2, //ms
						    timingFunction: 'ease',
						    needLayout:false,
						    delay: 0 //ms
						})
					})
				})
			},
			hide () {
				animation.transition(this.$refs.cd, {
				    styles: {
						transform: 'scale(0)',
						opacity: 0
				    },
				    duration: this.animaDuration, //ms
				    timingFunction: 'ease',
				    needLayout:false,
				    delay: 0 //ms
				})
				animation.transition(this.$refs.control, {
				    styles: {
						transform: 'translateY(300rpx)',
						opacity: 0
				    },
				    duration: this.animaDuration, //ms
				    timingFunction: 'ease',
				    needLayout:false,
				    delay: 0 //ms
				})
				animation.transition(this.$refs.desc, {
				    styles: {
						opacity: 0
				    },
				    duration: this.animaDuration, //ms
				    timingFunction: 'ease',
				    needLayout:false,
				    delay: 0 //ms
				})
				animation.transition(this.$refs.info, {
				    styles: {
						opacity: 0
				    },
				    duration: this.animaDuration, //ms
				    timingFunction: 'ease',
				    needLayout:false,
				    delay: 0 //ms
				})
				animation.transition(this.$refs.top, {
				    styles: {
						transform: 'translateY(-70rpx)',
						opacity: 0
				    },
				    duration: this.animaDuration, //ms
				    timingFunction: 'ease',
				    needLayout:false,
				    delay: 0 //ms
				}, () => {
					this.visible = false
				})
			},
			handleSliderChange (e) {
				this.isSliderChanging = false
				uni.$emit('seekSong', this.duration * (e.detail.value / 100))
			},
			handleSliderChanging (e) {
				this.isSliderChanging = true
				this.currentTiming = this.duration * (e.detail.value / 100)
			},
			//打开下载
			handleDownload () {
				if ( !this.src ) {
					uni.showToast({ title: '没有发现可下载的链接', icon: 'none' })
					return
				}
				this.download({title: this.title, url: this.src, isAdult: this.currentAudio.detail.isAdult})
			}
		}
	}
</script>

<style>
	.player .top {
		height: 70rpx;
		position: relative;
		transform: translateY(-70rpx);
		opacity: 0;
	}
	.player .back {
		width: 60rpx;
		align-items: center;
	}
	.player .tabs .tab-gap {
		width: 1.5px;
		height: 10rpx;
		margin: 0 30rpx;
		background-color: rgba(255, 255, 255, .5);
	}
	.player .control {
		padding: 40rpx 40rpx 100rpx 40rpx;
		transform: translateY(300rpx);
		opacity: 0;
	}
</style>